<template>
  <div class="content-card">
    <div class="title">
      <div class="front">
        <a-icon type="tags"></a-icon>
        <span>{{ "数据治理质检总览" }}</span>
      </div>
      <div class="back">{{ "总量" }}</div>
    </div>
    <div class="body">
      <div class="item-box">
        <my-gauge
          class="chart"
          gauge-name="quality-gauge-chart1"
          :percent="rate4"
        />
        <div class="label">{{ "数据质量通过率" }}</div>
      </div>
      <div class="item-box">
        <my-gauge
          class="chart"
          gauge-name="quality-gauge-chart2"
          :percent="rate2"
        />
        <div class="label">{{ "错误数据占比" }}</div>
      </div>
      <div class="item-box">
        <my-gauge
          class="chart"
          gauge-name="quality-gauge-chart3"
          :percent="rate3"
        />
        <div class="label">{{ "数据治理通过率" }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import MyGauge from "@/views/quality/components/my-gauge";
import API from "@/api/quality";
export default {
  name: "q2-card",
  components: { MyGauge },
  props: {
    rate1: { type: String, default: "0" },
  },
  data() {
    return {
      rate2: "17.47",
      rate3: "77.86",
      rate4: "83.53"
    };

  },
    methods: {
        getquality() {
            API.getquality().then((res) => {
                if (res.status === 200) {
                    var newdata = JSON.parse(res.data.resultContent);

                    this.rate4 = newdata.CenterCard.card[1];

                }
            });
        },
        getTask() {
            return () => {
                this.getquality();
            };
        },
    },
    mounted() {
        this.getTask()(); // 先执行 一次任务
        this.timer = setInterval(this.getTask(), 30000); // 设置周期触发任务
    },
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    },
};
</script>

<style lang="less" scoped>
.content-card {
  height: 100%;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    background: linear-gradient(to right, #dee9ff, #ffffff);
    .front {
      i {
        color: #6989c6;
        margin: 0 15px;
        font-size: 18px;
      }
      span {
        font-size: 16px;
        font-weight: 500;
      }
    }
    .back {
      font-size: 14px;
      margin: 0 15px;
    }
  }
  .body {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    .item-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 20px 10px;
      .chart {
        height: 92px;
        margin: 5px;
      }
      .label {
        font-size: 14px;
      }
    }
  }
}
</style>
